<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米手机5背景作业</title>

    <style type="text/css">
        body {
            margin: 0;
        }

        .page1 {
            padding-left: 100px;
            padding-top: 200px;
            height: 650px;
            background: #cccccc url("img/h-12.jpg") no-repeat fixed top;
        }

        .page1 > h1 {
            -webkit-margin-before: 0;
            -webkit-margin-after: 0;
            font-weight: normal;
        }

        .page1_p {
            margin-top: 70px;
            color: gray;
            font-weight: bold;
        }

        .page1_p2 {
            margin-top: 70px;
            color: red;
        }

        .page1_p2 > span {
            font-size: 3em;
        }

        .page1_a > a {
            text-decoration: none;
            color: darkred;
        }

        .page2 {
            text-align: center;
            padding-top: 300px;
            height: 650px;
            background: #cccccc url("img/h-8.jpg") no-repeat fixed top;
        }

        .page2 > h1 {
            font-weight: normal;
            font-size: 2.5em;
            color: white;
        }

        .page2 > p {
            margin-top: 70px;
            letter-spacing: 2px;
            font-weight: bold;
            color: white;
        }

        .page2 > a {
            color: orangered;
            font-weight: bold;
            text-decoration: none;
        }

        .text_block {
            margin-top: 200px;
        }

        .big_text {
            width: 300px;
            font-weight: normal;
            font-size: 2.5em;
            color: white;
            display: inline-block;
        }

        .big_text_with_left_hr {
            width: 300px;
            border-left: 1px solid white;
            font-weight: normal;
            font-size: 2.5em;
            color: white;
            display: inline-block;
        }

        /*这里还是无法消除最后那一点缝隙～～～*/

        .normal_text {
            width: 300px;
            letter-spacing: 2px;
            font-weight: bold;
            color: white;
            display: inline-block;
        }

        .normal_text_with_left_hr {
            width: 300px;
            border-left: 1px solid white;
            letter-spacing: 2px;
            font-weight: bold;
            color: white;
            display: inline-block;
        }

        .page3 {
            text-align: center;
            padding-top: 300px;
            height: 650px;
            background: #cccccc url("img/h-13.jpg") no-repeat fixed top;
        }

        .page3 > h1 {
            font-weight: normal;
            font-size: 2.5em;
            color: black;
        }

        .page3 > p {
            margin-top: 70px;
            letter-spacing: 1.5px;
            font-weight: bold;
            color: gray;
        }

        .page3 > p > span {
            vertical-align: super;
            font-size: 0.5em;
        }

        .page3 > a {
            color: orangered;
            font-weight: bold;
            text-decoration: none;
        }

        .page4 {
            text-align: center;
            padding-top: 200px;
            height: 650px;
            background: rgb(93, 91, 96) url("img/bg.png") no-repeat center bottom;
        }

        .page4 > h1 {
            font-weight: normal;
            font-size: 2.5em;
            color: white;
        }

        .page4 > p {
            margin-top: 70px;
            letter-spacing: 1.5px;
            font-weight: bold;
            color: white;
        }

        .page5 {
            text-align: left;
            padding-left: 100px;
            padding-top: 200px;
            height: 650px;
            background: #cccccc url("img/h-24.jpg") no-repeat fixed top;
        }

        .page5 > h1 {
            font-size: 2.5em;
            -webkit-margin-before: 0;
            -webkit-margin-after: 0;
            font-weight: normal;
        }

        .page5 > p {
            margin-top: 70px;
            color: gray;
            font-weight: bold;
        }

        .page5 > a {
            color: orangered;
            font-weight: bold;
            text-decoration: none;
        }

        .page6 {
            text-align: center;
            padding-top: 100px;
            height: 700px;
            background: #cccccc url("img/h-21.jpg") no-repeat fixed top;
        }

        .page6 > h1 {
            letter-spacing: 4px;
            font-weight: normal;
            font-size: 2.5em;
            color: black;
        }

        .page6 > p {
            margin-top: 50px;
            margin-bottom: 50px;
            letter-spacing: 1.5px;
            font-weight: bold;
            color: gray;
        }

        .page6 > a {
            color: orangered;
            font-weight: bold;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="page1">
    <h1 class="page1_h1">小米手机5</h1>
    <h1>十余项黑科技，很轻狠快</h1>
    <p class="page1_p">
        骁龙820处理器，最大可选4GB内存+128GB闪存 <br>
        4轴防抖相机，3D陶瓷/玻璃机身 <br>
        支持手机分身，能刷公交卡、银行卡
    </p>
    <p class="page1_p2">
        <span>1799</span>元起，直降200！
    </p>
    <div class="page1_a">
        <a href="http://www.baidu.com" target="_blank">外观视频</a>
        <a href="http://blog.54yongf.com" target="_blank">4轴防抖视频</a>
    </div>
</div>
<div class="page2">
    <h1>14万分，快得有点狠</h1>
    <p>
        CPU性能翻倍的骁龙820处理器，提速87%的UFS闪存，快40%的Adreno530图形引擎，<br>
        快100%的双通道LPDDDR4，Antutu跑分性能测试高达惊人的14万分。<br>
    </p>
    <a href="http://www.deepin.org" target="_blank">了解性能 ></a>
    <div class="text_block">
        <span class="big_text">骁龙820</span>
        <span class="big_text_with_left_hr">4GB</span>
        <span class="big_text_with_left_hr">128GB</span>
    </div>
    <div>
        <span class="normal_text">旗舰处理器</span>
        <span class="normal_text_with_left_hr">可选最大内存</span>
        <span class="normal_text_with_left_hr">可选最大内存</span>
    </div>
</div>
<div class="page3">
    <h1>129克，手感轻得不真实</h1>
    <p>
        5.15"大屏幕，整机仅129克。<span>[注]</span><br>
        还有3D纤细侧腰，曲面玻璃的温润手感。握在手中的一刻，仿佛轻轻握住整个世界的倒影。<br>
    </p>
    <a href="http://www.deepin.org" target="_blank">了解性能 ></a>
</div>
<div class="page4">
    <h1>4轴防抖相机，感动、激动、不抖动</h1>
    <p>
        采用源自专业相机的4轴光学防抖技术，比一般手机2轴防抖效果更佳，<br>
        阳光、暗光、运动、单手，都能稳定记录，清晰成像。
    </p>
</div>
<div class="page5">
    <h1>16颗灯省电高亮屏幕</h1>
    <h1>鲜艳通透</h1>
    <p>
        屏幕深度定制，在仅有5.15"屏幕上精密排布16颗LED灯珠，亮度提升30%，<br>
        色彩依旧鲜艳。灯光下看起来更通透，<br>
        阳光下看得更清晰，这才是好屏幕应有的亮度。
    </p>
    <a href="http://www.deepin.org">了解屏幕 ></a>
</div>
<div class="page6">
    <h1>你期待的MIUI8来了</h1>
    <p>
        全功能NFC让手机变身公交卡、银行卡，系统双开带来加强版隐私保护，应用分身让两个QQ独立运行，免账号切换。<br>
        这些你期待的功能，现在都能用了！
    </p>
    <a href="http://www.deepin.org" target="_blank">一键换机演示</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="http://www.deepin.org" target="_blank">了解操作系统></a>
</div>

</body>
</html>